iT邦幫忙

2024 iThome 鐵人賽

DAY 6
0

認識Android 設計畫面的工具(UI布局)

UI布局有分很多種類,原則就是框出一個範圍,在裡面做拉物件的功能

Constraint Layout(約束布局)

預設是Constraint Layout(約束布局)-在物件的四個邊拉垂直線跟水平線約束物件的位置
image
下面四行就是物件綁定的水平or垂直線
parent=畫面的邊框
image
新增方法也很簡單點擊上方拉取即可
image

那每新增一條垂直或水平線,程式會新增這條線的設定
android:orientation="vertical"=判斷垂直or水平線
app:layout_constraintGuide_begin="168dp"=距離左邊開始的距離
image
將物件連接時 被約束的邊程式就會記錄水平線or垂直線的id
image
在這抱怨一下 Constraint Layout每新增一個元件就得有四條線來約束這樣對於程式後面會非常攏長,希望未來可以優化

Linearlayout(線性布局)

linearlayout(線性布局)-建立一個範圍,設定範圍內的物件排序是(垂直排序還是水平排序) 這裡的垂直跟水平排序是指物件放入時的規則跟前面拉的垂直水平線約束很不一樣,切勿搞混
image
android:orientation="vertical"決定是垂直還是水平排序
android:layout_width=設定寬度
android:layout_height=設定高度
match_parent=抓取元件當下背景最大長度
wrap_content=依照內容物(字體大小或圖片大小)決定長度

特殊狀況

image
這裡有個狀況是說在Constraint Layout裡有物件沒有約束到,所以儘管是linearlayout也要拉線或是可以更改整個布局像這樣再者可以直接忽略沒有關係
但這整種狀況通常只出現在最外圈的lienearlayout
tools:ignore="MissingConstraints"
image

linearlayout可以縮排使用

image

需要注意的是寬度跟高度的設定match_parent有時會把同層的其他元件擠到畫面外,使用時要熟記特性。
有match_parent的原件在前時,後面元件會被擠出,
但是有match_parent的原件在最後時,前面非match_parent的元件可以存在
image
image

linearlayout還有一個特別的設定(線性布局裡面可以依照剩餘空間做權重比例的擺放)
當水平(horizontal)擺放時,可以把內容物的"寬"設成0dp,並設權重
android:layout_weight=""
當垂直(vertical)擺放時,可以把內容物的"高"設成0dp,並設權重
android:layout_weight=""

其他還有TableLayout、AbsoluteLayout、Relative Layout


上一篇
[day05]介紹Activity
下一篇
[day07]Text
系列文
深入Android 物件的認識與應用實踐30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言